<template>
  <div>
    <!-- 上方搜索栏 -->
    <div class="topBock">
      <el-row :gutter="16">
        <el-col :span="12">
          <div class="boxDiv">
            <div class="title">
              <span class="icon"></span>
              单位备案进度统计
            </div>
            <div class="bigDiv">
              <div class="itemDiv">
                <div class="d1">待审核</div>
                <div class="d2">0</div>
              </div>
              <div class="itemDiv">
                <div class="d1">已完成</div>
                <div class="d2">0</div>
              </div>
              <div class="itemDiv">
                <div class="d1">已注销</div>
                <div class="d2">0</div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="boxDiv">
            <div class="title"><span class="icon"></span>个人备案进度统计</div>
            <div class="bigDiv">
              <div class="itemDiv">
                <div class="d1">待审核</div>
                <div class="d2">0</div>
              </div>
              <div class="itemDiv">
                <div class="d1">已完成</div>
                <div class="d2">0</div>
              </div>
              <div class="itemDiv">
                <div class="d1">已注销</div>
                <div class="d2">0</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="bottomDiv">
      <el-row style="margin: 16px 0">
        <el-col :span="24">
          <div
            ref="chartDom"
            class="boxDiv"
            style="width: 100%; height: 400px"
          ></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chartInstance: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chartDom;
      this.chartInstance = echarts.init(chartDom);

      // 配置选项（示例：柱状图）
      const option = {
        title: {
          text: "单位备案区域分布",
        },
        xAxis: {
          data: [
            "北京科技有限公司",
            "吉林公司",
            "北京科技有限公司",
            "吉林公司",
            "吉林公司",
            "吉林公司",
            "吉林公司",
            "吉林公司",
            "北京科技有限公司",
            "北京科技有限公司",
          ],
        },
        yAxis: {},
        series: [{ type: "bar", data: [10, 20, 30, 120, 200, 9, 20, 32, 44] }],
      };

      this.chartInstance.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-card__body {
  height: 100%;

  width: 100%;
}
.topBock {
  //   padding: 16px;
  margin: 16px;
}
.bottomDiv {
  margin: 0 16px;
}
.boxDiv {
  background-color: #fff;
  border-radius: 6px;
  padding: 16px;
}
.bigDiv {
  display: flex;
}
.boxDiv .icon {
  display: inline-block;
  height: 12px;
  width: 4px;
  margin-right: 4px;
  background-color: #3c94f4;
}
.title {
  margin-bottom: 16px;
}
.itemDiv {
  flex: 1;
}
.itemDiv img {
  width: 40px;
}
.itemDiv .d1 {
  color: #979ca5;
  font-size: 13px;
  margin-bottom: 8px;
}
.itemDiv .d2 {
  color: #070707;
  font-size: 24px;
  font-weight: 600;
}
</style>
